
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>
    // 事件修饰符 stop, prevent, capture, self, once, passive
    // 按键修饰符 enter, tab, delete, esc, up, down, left, right
    // 鼠标(左右键，滚轮)修饰符 left,right,middle
    // 精确修饰符exact
    const app = Vue.createApp({
        data(){
            return {
               message: true,
               msgArray: [],
               radio:'',
               select:'',
               selectArray:[],
               options:[
                {
                    text:'AAA',
                    value:'aaa'
                },
                {
                   text:'BBB',
                   value:'bbb'
               },
               {
                   text:'CCC',
                   value:'ccc'
               }

               ]
            }
        },
        methods:{
            
        },
        template:
        `
            <div>
                {{message}}==<input type="checkbox" v-model="message" value="apple"/>
            </div>   
            <div>
                <div>{{msgArray}}</div>
                <input type="checkbox" v-model="msgArray" value="apple"/>
                <input type="checkbox" v-model="msgArray" value="apple2"/>
                <input type="checkbox" v-model="msgArray" value="apple3"/>
                <input type="checkbox" v-model="msgArray" value="apple4"/>
            </div>   
            <div>
                <div>{{radio}}</div>
                <input type="radio" v-model="radio" value="apple"/>
                <input type="radio" v-model="radio" value="apple2"/>
                <input type="radio" v-model="radio" value="apple3"/>
                <input type="radio" v-model="radio" value="apple4"/>
            </div>  
            <div>
                {{select}}
                <select v-model="select" multiple>
                    <option disabled value="">请选择内容</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select>
                <select v-model="selectArray" multiple>
                    <option disabled value="">请选择内容</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select>
                <select v-model="message" multiple>
                    <option v-for="item in options" :item="item.value">{{item.text}}</option>
                </select>
            </div>   
        `
    });

    app.component('demo', {
        template:
         `
            
        `
    });

    const vm = app.mount("#root");
</script>
</html>